import styled from 'styled-components'
import Icon from '@/components/Icon'
import img from '@img/all.png'
export const StyledWrap = styled.div`
	display: flex;
	flex: 1;
	flex-direction: column;
`
interface IconActionProps {
	isOn: boolean
}
export const IconActionEditBatchPoll = styled(Icon)<IconActionProps>`
	width: 16px;
	height: 16px;
	background-position: ${(props) => (props.isOn ? `0px -3322px` : `-32px -3322px`)};
	&:hover {
		background-position: ${(props) => (props.isOn ? `-16px -3322px` : `-48px -3322px`)};
	}
`
/**哑音操作按钮*/
export const IconActionMuteOption = styled(Icon)<IconActionProps>`
	cursor: pointer;
	width: 23px;
	height: 23px;
	background-position: ${(props) => (props.isOn ? `-667px -226px` : `-759px -226px`)};
	&:hover {
		background-position: ${(props) => (props.isOn ? `-690px -226px` : `-782px -226px`)};
	}
`
/**呼叫按钮 */
export const IconActionCallOption = styled(Icon)`
	cursor: pointer;
	width: 23px;
	height: 23px;
	background-position: -621px -226px;
	&:hover {
		background-position: -598px -226px;
	}
`
/**呼叫状态*/
export const IconActionCalling = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -320px -2024px;
`
/**视频源*/
export const IconStatusVideoSrc = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -260px -2024px;
`
/**哑音*/
export const IconStatusMute = styled(Icon)<IconActionProps>`
	width: 20px;
	height: 20px;
	background-position: ${(props) => (props.isOn ? `-280px -2024px` : `-300px -2024px`)};
`
/**离线*/
export const IconStatusOffline = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -640px -2004px;
`
export const StyledView = styled.div<{ disabled?: boolean; scale: number }>`
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex: 1;
	border: 1px dashed #bababa;
	.vmp-list {
		&.scale0 {
			display: none !important;
		}
		position: relative;
		.vmp-drop-item-online ._box_content {
			color: rgb(149, 150, 151);
		}
		.vmp-list-item {
			position: relative;
			border: 1px solid #c3c3c3;
			box-sizing: border-box;
			&.active,
			&:hover {
				border-color: ${(props) => (props.disabled ? '' : '#1e94da')};
				.vmp-drop-item {
					.operate {
						display: block;
					}
					._box_content {
						.mt_operation_videosrc,
						.mt_operation_mute,
						.mt_operation_online {
							display: none;
						}
					}
					._box_content_online {
						color: rgb(149, 150, 151);
					}
				}
			}
			.vmp-drop-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				font-size: 12px;
				color: #4e4e4e;
				user-select: none;
				cursor: ${(props) => (props.disabled ? '' : 'pointer')};
				.vmp-drag-item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.operate {
					display: none;
					position: absolute;
					right: 0;
					top: 0;
					span {
						display: inline-block;
						width: 23px;
						height: 23px;
						background-image: url(${img});
						cursor: ${(props) => (props.disabled ? '' : 'pointer')};
						&.set {
							background-position: -92px -226px;
							&:hover {
								background-position: -115px -226px;
							}
						}
						&.delete {
							background-position: -184px -226px;
							&:hover {
								background-position: -207px -226px;
							}
						}
						&.call {
							cursor: pointer;
							background-position: -674px -2358px;
							&:hover {
								background-position: -674px -2358px;
							}
						}
					}
				}
				.text {
					width: 100%;
				}
				.mode,
				.cur-mt {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
				}
				._box_content {
					display: -webkit-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
					width: 100%;
					align-items: center;
					justify-content: center;
					.mt_operation_calling {
						position: absolute;
						right: 4px;
						top: 4px;
					}
					.mt_operation_videosrc {
						position: absolute;
						right: 26px;
						top: 4px;
					}
					.mt_operation_mute {
						position: absolute;
						right: 4px;
						top: 4px;
					}
					.mt_operation_online {
						position: absolute;
						right: 4px;
						top: 4px;
					}
					.isCalling {
						color: rgb(19, 150, 65);
					}
				}
				._box_content_online {
					color: rgb(149, 150, 151);
				}
				.content {
					display: -webkit-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					justify-content: center;
				}
			}
		}

		/** 1画面 */
		&.one {
			width: ${(props) => {
				let _number = props.scale * 426
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 270
				return `${_number}px`
			}};
			.vmp-list-item {
				width: 100%;
				height: 100%;
			}
		}
		/** 2画面 */
		&.two_a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: ${(props) => {
				let _number = props.scale * 446
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 200
				return `${_number}px`
			}};
			.vmp-list-item {
				width: ${(props) => {
					let _number = props.scale * 220
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 160
					return `${_number}px`
				}};
			}
		}
		/** 2画面  一大一小 */
		&.two_b,
		&.two_c,
		&.two_d,
		&.two_e {
			width: ${(props) => {
				let _number = props.scale * 426
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 270
				return `${_number}px`
			}};
			.vmp-list-item:nth-child(1) {
				width: ${(props) => {
					let _number = props.scale * 426
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 270
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(2) {
				position: absolute;
				width: ${(props) => {
					let _number = props.scale * 160
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
			}
		}
		&.two_b {
			.vmp-list-item:nth-child(2) {
				bottom: 1px;
				right: 1px;
			}
		}
		&.two_c {
			.vmp-list-item:nth-child(2) {
				top: 1px;
				right: 1px;
			}
		}
		&.two_d {
			.vmp-list-item:nth-child(2) {
				top: 1px;
				left: 1px;
			}
		}
		&.two_e {
			.vmp-list-item:nth-child(2) {
				bottom: 1px;
				left: 1px;
			}
		}

		/*3画面*/
		&.three_a {
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 410) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 250
				return `${_number}px`
			}};
			// height: 250px;
			// width: 410px;
			.vmp-list-item {
				// height: 120px;
				// width: 200px;
				width: ${(props) => {
					let _number = props.scale * 200
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 120
					return `${_number}px`
				}};
				float: left;
				margin-top: 10px;
			}
			.vmp-list-item:nth-child(1) {
				float: none;
				margin: 0 auto;
			}
			.vmp-list-item:nth-child(2) {
				margin-right: 10px;
			}
		}

		&.three_b {
			// height: 250px;
			// width: 410px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 410) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 250
				return `${_number}px`
			}};
			.vmp-list-item {
				// height: 120px;
				// width: 200px;
				width: ${(props) => {
					let _number = props.scale * 200
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 120
					return `${_number}px`
				}};
				float: left;
			}
			.vmp-list-item:nth-child(1) {
				margin-top: 70px;
				margin-right: 10px;
			}
			.vmp-list-item:nth-child(2) {
				margin-bottom: 10px;
			}
		}
		&.three_c {
			// height: 180px;
			// width: 410px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 410) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 180
				return `${_number}px`
			}};
			.vmp-list-item {
				// height: 85px;
				// width: 129px;
				width: ${(props) => {
					let _number = props.scale * 129
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 85
					return `${_number}px`
				}};
				float: left;
			}
			.vmp-list-item:nth-child(1) {
				// height: 180px;
				// width: 270px;
				width: ${(props) => {
					let _number = props.scale * 270
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 180
					return `${_number}px`
				}};
				margin-right: 10px;
			}
			.vmp-list-item:nth-child(2) {
				margin-bottom: 10px;
			}
		}
		&.four_a {
			display: flex;
			justify-content: space-between;
			align-items: space-between;
			flex-wrap: wrap;
			// height: 270px;
			// width: 410px;
			width: ${(props) => {
				let _number = props.scale * 410
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 270
				return `${_number}px`
			}};
			.vmp-list-item {
				// height: 130px;
				// width: 200px;
				width: ${(props) => {
					let _number = props.scale * 200
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 130
					return `${_number}px`
				}};
			}
		}

		&.four_b {
			// height: 288px;
			// width: 390px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 390) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 288
				return `${_number}px`
			}};
			.vmp-list-item {
				// width: 120px;
				// height: 80px;
				width: ${(props) => {
					let _number = props.scale * 120
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 80
					return `${_number}px`
				}};
				float: left;
				margin: 10px 10px 0 0;
			}
			.vmp-list-item:nth-child(1) {
				// height: 180px;
				// width: 270px;
				width: ${(props) => {
					let _number = props.scale * 270
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 180
					return `${_number}px`
				}};
				float: none;
				margin-left: ${(props) => {
					let _number = props.scale * 55
					return `${_number}px`
				}};
				// margin-left: 55px;
			}
			.vmp-list-item:last-child {
				margin-left: 0;
			}
		}

		&.four_c {
			// height: 270px;
			// width: 400px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 400) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 270
				return `${_number}px`
			}};
			.vmp-list-item {
				width: ${(props) => {
					let _number = props.scale * 120
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 83
					return `${_number}px`
				}};
				// width: 120px;
				// height: 83px;
				float: left;
				// margin-bottom: 6px;
				margin-bottom: ${(props) => {
					let _number = props.scale * 6
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 180px;
				// width: 270px;
				// margin-top: 40px;
				// margin-right: 10px;
				width: ${(props) => {
					let _number = props.scale * 270
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 180
					return `${_number}px`
				}};
				margin-top: ${(props) => {
					let _number = props.scale * 40
					return `${_number}px`
				}};
				margin-right: ${(props) => {
					let _number = props.scale * 10
					return `${_number}px`
				}};
			}
		}

		&.five_a {
			// height: 235px;
			// width: 433px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 443) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 235
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				width: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 70
					return `${_number}px`
				}};
				margin-top: ${(props) => {
					let _number = props.scale * 14
					return `${_number}px`
				}};
				margin-right: ${(props) => {
					let _number = props.scale * 6
					return `${_number}px`
				}};
				// height: 70px;
				// width: 100px;
				// margin-right: 6px;
				// margin-top: 14px;
			}
			.vmp-list-item:nth-child(1) {
				// height: 150px;
				// width: 220px;
				// margin: 0 102px;
				width: ${(props) => {
					let _number = props.scale * 220
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 150
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 102
					return `0 ${_number}px`
				}};
			}
		}

		&.five_b {
			// height: 290px;
			// width: 455px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 455) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 290
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// width: 100px;
				// margin-left: 10px;
				// margin-top: 5px;
				width: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin-top: ${(props) => {
					let _number = props.scale * 5
					return `${_number}px`
				}};
				margin-left: ${(props) => {
					let _number = props.scale * 10
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 275px;
				// width: 320px;
				width: ${(props) => {
					let _number = props.scale * 320
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 275
					return `${_number}px`
				}};
			}
		}

		&.six_a {
			// height: 290px;
			// width: 425px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 425) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 290
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 85px;
				// margin: 5px;
				// width: 129px;
				width: ${(props) => {
					let _number = props.scale * 129
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 85
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 5
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 180px;
				// width: 268px;
				width: ${(props) => {
					let _number = props.scale * 268
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 180
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}

		&.six_b {
			// height: 274px;
			// width: 440px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 440) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 274
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 50px;
				// margin: 2px;
				// width: 84px;
				width: ${(props) => {
					let _number = props.scale * 84
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 50
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 266px;
				// width: 340px;
				width: ${(props) => {
					let _number = props.scale * 340
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 266
					return `${_number}px`
				}};
			}
		}

		&.seven {
			// height: 280px;
			// width: 429px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 429) + 8
				return `${_number}px`
			}};
			height: ${(props) => {
				let _number = props.scale * 280
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// margin: 2px;
				// width: 101px;
				width: ${(props) => {
					let _number = props.scale * 101
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				// height: 135px;
				// width: 206px;
				width: ${(props) => {
					let _number = props.scale * 206
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 135
					return `${_number}px`
				}};
			}
		}
		&.eight {
			// width: 429px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 429) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// margin: 2px;
				// width: 100px;
				width: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 203px;
				// width: 308px;
				width: ${(props) => {
					let _number = props.scale * 308
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 203
					return `${_number}px`
				}};
				margin-bottom: ${(props) => {
					let _number = props.scale * 0
					return `${_number}px`
				}};
			}
		}
		&.nine {
			// width: 433px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 443) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 90px;
				// margin: 2px;
				// width: 140px;
				width: ${(props) => {
					let _number = props.scale * 140
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 90
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
		}
		&.ten {
			// width: 429px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 429) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// width: 100px;
				// margin: 2px;
				width: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(5),
			.vmp-list-item:nth-child(6) {
				// height: 135px;
				// width: 204px;
				width: ${(props) => {
					let _number = props.scale * 204
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 135
					return `${_number}px`
				}};
			}
		}
		&.eleven_a {
			// width: 480px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 480) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// margin: 2px;
				// width: 90px;
				width: ${(props) => {
					let _number = props.scale * 90
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 130px;
				// margin: 0 117px 3px;
				// width: 240px;
				width: ${(props) => {
					let _number = props.scale * 240
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 130
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 117
					let _number2 = props.scale * 3
					return `0 ${_number}px ${_number2}px`
				}};
			}
		}
		&.eleven_b {
			// width: 480px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 480) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 60px;
				// width: 110px;
				// margin: 5px;
				width: ${(props) => {
					let _number = props.scale * 111.5
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 60
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				// height: 90px;
				// width: 150px;
				width: ${(props) => {
					let _number = props.scale * 150
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 90
					return `${_number}px`
				}};
			}
		}
		&.twelve_a {
			// width: 429px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 429) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 44px;
				// margin: 1px;
				// width: 65px;
				width: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 44
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 1
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				// height: 136px;
				// width: 200px;
				width: ${(props) => {
					let _number = props.scale * 200
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 136
					return `${_number}px`
				}};
			}
		}
		&.twelve_b {
			// width: 445px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 445) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// margin: 2px;
				// width: 85px;
				width: ${(props) => {
					let _number = props.scale * 85
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				// height: 126px;
				// width: 218px;
				width: ${(props) => {
					let _number = props.scale * 218
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 126
					return `${_number}px`
				}};
			}
		}
		&.thirteen {
			// width: 388px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 388) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 68px;
				// margin: 2px;
				// width: 90px;
				width: ${(props) => {
					let _number = props.scale * 90
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 68
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(7) {
				// height: 140px;
				// width: 186px;
				width: ${(props) => {
					let _number = props.scale * 184
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 140
					return `${_number}px`
				}};
				// 此处有变更
				margin-bottom: 0px;
			}
			.vmp-list-item:nth-child(6) {
				position: absolute;
				left: 0;
				// top: 144px;
				top: ${(props) => {
					let _number = props.scale * 144
					return `${_number}px`
				}};
			}
		}
		&.fourteen {
			// width: 460px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 460) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 59px;
				// margin: 2px;
				// width: 88px;
				width: ${(props) => {
					let _number = props.scale * 88
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 59
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				// height: 122px;
				// width: 180px;
				width: ${(props) => {
					let _number = props.scale * 180
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 122
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.fifteen_a {
			// width: 450px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 450) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 55px;
				// margin: 2px;
				// width: 71px;
				width: ${(props) => {
					let _number = props.scale * 71
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 55
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				// height: 100px;
				// margin-left: 3px;
				// width: 145px;
				width: ${(props) => {
					let _number = props.scale * 145
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 100
					return `${_number}px`
				}};
				margin-left: ${(props) => {
					let _number = props.scale * 3
					return `${_number}px`
				}};
			}
		}
		&.fifteen_b {
			// width: 468px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 468) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 50px;
				// margin: 2px;
				// width: 74px;
				width: ${(props) => {
					let _number = props.scale * 74
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 50
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 212px;
				// margin-left: 3px;
				// width: 307px;
				width: ${(props) => {
					let _number = props.scale * 307
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 212
					return `${_number}px`
				}};
				margin-left: ${(props) => {
					let _number = props.scale * 3
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.sixteen {
			// width: 438px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 438) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 65px;
				// margin: 2px;
				// width: 105px;
				width: ${(props) => {
					let _number = props.scale * 105
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 65
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
		}
		&.seventeen {
			// width: 436px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 436) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 55px;
				// margin: 1px;
				// width: 85px;
				width: ${(props) => {
					let _number = props.scale * 85
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 55
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 1
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 169px;
				// width: 259px;
				width: ${(props) => {
					let _number = props.scale * 259
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 169
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.eighteen {
			// width: 462px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 462) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 60px;
				// margin: 1px;
				// width: 75px;
				width: ${(props) => {
					let _number = props.scale * 75
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 60
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 1
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(7),
			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10),
			.vmp-list-item:nth-child(11),
			.vmp-list-item:nth-child(12) {
				// height: 80px;
				// margin-right: 1px;
				// width: 152px;
				width: ${(props) => {
					let _number = props.scale * 152
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 80
					return `${_number}px`
				}};
				margin-right: ${(props) => {
					let _number = props.scale * 1
					return `${_number}px`
				}};
			}
		}
		&.nineteen {
			// width: 450px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 450) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 52px;
				// margin: 2px;
				// width: 85px;
				width: ${(props) => {
					let _number = props.scale * 85
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 52
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				// height: 108px;
				// width: 174px;
				width: ${(props) => {
					let _number = props.scale * 174
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 108
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.twenty {
			// width: 410px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 410) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 50px;
				// margin: 2px;
				// width: 64px;
				width: ${(props) => {
					let _number = props.scale * 64
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 50
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				// height: 110px;
				// width: 200px;
				width: ${(props) => {
					let _number = props.scale * 200
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 110
					return `${_number}px`
				}};
			}
		}
		&.twenty_one {
			// width: 433px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 433) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 43px;
				// margin: 2px;
				// width: 68px;
				width: ${(props) => {
					let _number = props.scale * 68
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 43
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10) {
				position: absolute;
				left: 0;
				// top: 94px;
				top: ${(props) => {
					let _number = props.scale * 94
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(9) {
				// top: 141px;
				top: ${(props) => {
					let _number = props.scale * 141
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(10) {
				// top: 188px;
				top: ${(props) => {
					let _number = props.scale * 188
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(11) {
				// height: 184px;
				// width: 284px;
				width: ${(props) => {
					let _number = props.scale * 284
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 184
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.twenty_two {
			// width: 450px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 450) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 50px;
				// margin: 1px;
				// width: 88px;
				width: ${(props) => {
					let _number = props.scale * 88
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 50
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 1
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(1) {
				// height: 101px;
				// width: 178px;
				width: ${(props) => {
					let _number = props.scale * 178
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 101
					return `${_number}px`
				}};
			}
		}
		&.twenty_four {
			// width: 436px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 436) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 43px;
				// margin: 2px;
				// width: 68px;
				width: ${(props) => {
					let _number = props.scale * 68
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 43
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}

			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(14) {
				position: absolute;
				left: 0;
				// top: 94px;
				top: ${(props) => {
					let _number = props.scale * 94
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(14) {
				// top: 188px;
				top: ${(props) => {
					let _number = props.scale * 188
					return `${_number}px`
				}};
			}
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10),
			.vmp-list-item:nth-child(15),
			.vmp-list-item:nth-child(16) {
				// height: 90px;
				// width: 140px;
				width: ${(props) => {
					let _number = props.scale * 140
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 90
					return `${_number}px`
				}};
				margin-bottom: 0px;
			}
		}
		&.twenty_five {
			// width: 460px;
			width: ${(props) => {
				let _number = Math.ceil(props.scale * 460) + 8
				return `${_number}px`
			}};
			.vmp-list-item {
				float: left;
				// height: 53px;
				// margin: 2px;
				// width: 88px;
				width: ${(props) => {
					let _number = props.scale * 88
					return `${_number}px`
				}};
				height: ${(props) => {
					let _number = props.scale * 53
					return `${_number}px`
				}};
				margin: ${(props) => {
					let _number = props.scale * 2
					return `${_number}px`
				}};
			}
		}
	}
`
export const StyledPopup = styled.div`
	background: #fff;
	border: 1px solid #ccc;
	padding: 8px 0;
	width: 170px;
	border-radius: 6px;
	.item-line {
		border-bottom: 1px solid #ccc;
		cursor: default;
		display: block;
		font-size: 0;
		height: 1px;
		margin: 2px 5px;
		padding: 0;
		width: 160px;
	}
	.rc_box-menu {
		position: relative;
		padding-left: 30px;
		color: #4e4e4e;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		text-align: left;
		width: 100%;
		cursor: pointer;
		.select-icon {
			display: inline-block;
			height: 7px;
			width: 10px;
			position: absolute;
			left: 12px;
			top: 11px;
			background-image: url(${img});
			background-position: 0px -654px;
		}
		&:hover {
			background: #1e94da;
			color: #ffffff;
			width: auto;
			.select-icon {
				background-position: -10px -654px;
			}
		}
	}
`
export const AddIcon = styled.div`
	width: 17px;
	height: 17px;
	background: url('')
		no-repeat;
`
export const ItemGhost = styled.div`
	height: 30;
	background: linear-gradient(90deg, #2d8bc0, #53afe4);
	color: #ffffff;
	line-height: 30px;
	padding-left: 10px;
	font-size: 12px;
`
